<template>
    <div class="orders-page">
        <h2>我的订单</h2>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="全部" name="all">
                <order-list :orders="filteredOrders" @refresh="fetchOrders(true)" />
            </el-tab-pane>
            <el-tab-pane label="待付款" name="PENDING_PAYMENT">
                <order-list :orders="filteredOrders" @refresh="fetchOrders(true)" />
            </el-tab-pane>
            <el-tab-pane label="待发货" name="PROCESSING">
                <order-list :orders="filteredOrders" @refresh="fetchOrders(true)" />
            </el-tab-pane>
            <el-tab-pane label="待收货" name="1">
                <order-list :orders="filteredOrders" @refresh="fetchOrders(true)" />
            </el-tab-pane>
            <el-tab-pane label="已完成" name="2">
                <order-list :orders="filteredOrders" @refresh="fetchOrders(true)" />
            </el-tab-pane>
            <el-tab-pane label="已取消" name="3">
                <order-list :orders="filteredOrders" @refresh="fetchOrders(true)" />
            </el-tab-pane>
        </el-tabs>
        
        <div v-if="loading" class="loading-container">
            <el-skeleton :rows="3" animated />
        </div>
        
        <div v-if="!loading && filteredOrders.length > 0" class="load-more">
            <el-button 
                v-if="hasMoreOrders" 
                type="primary" 
                plain 
                :loading="loadMoreLoading" 
                @click="loadMoreOrders"
            >
                加载更多
            </el-button>
            <p v-else class="no-more">没有更多订单了</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useOrderStore } from '@/stores/order'
import OrderList from '@/components/order/OrderList.vue'
import { ElMessage } from 'element-plus'

const orderStore = useOrderStore()
const activeTab = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const loadMoreLoading = ref(false)
const hasMoreOrders = ref(true)

// 根据标签筛选订单
const filteredOrders = computed(() => {
    if (activeTab.value === 'all') {
        return orderStore.orders
    }
    return orderStore.orders.filter(order => order.status.toString() === activeTab.value)
})

// 切换标签时重新加载数据
const handleTabClick = () => {
    currentPage.value = 1
    hasMoreOrders.value = true
    fetchOrders(true)
}

// 获取订单列表
const fetchOrders = async (reset = false) => {
    loading.value = true
    try {
        const params: any = {
            page: currentPage.value,
            size: pageSize.value
        }
        
        if (activeTab.value !== 'all') {
            params.status = parseInt(activeTab.value)
        }
        
        const success = await orderStore.fetchOrders(params)
        
        if (success) {
            // 判断是否还有更多数据
            hasMoreOrders.value = orderStore.orders.length < orderStore.total
        } else {
            ElMessage.error('获取订单列表失败')
        }
    } catch (error) {
        console.error('获取订单失败:', error)
        ElMessage.error('获取订单列表失败')
    } finally {
        loading.value = false
    }
}

// 加载更多订单
const loadMoreOrders = async () => {
    if (loadMoreLoading.value || !hasMoreOrders.value) return
    
    loadMoreLoading.value = true
    currentPage.value++
    
    try {
    await fetchOrders()
    } finally {
        loadMoreLoading.value = false
    }
}

// 组件挂载时获取订单数据
onMounted(() => {
    fetchOrders(true)
})
</script>

<style scoped>
.orders-page {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.loading-container {
    margin: 20px 0;
}

.load-more {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.no-more {
    color: #909399;
    font-size: 14px;
}
</style>